﻿<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
  
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Multiple Consoles | RogueSharp </title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="title" content="Multiple Consoles - RogueSharp ">
    <meta name="generator" content="docfx 2.47.0.0">
    
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/dracula.min.css">
    <link rel="stylesheet" href="../styles/site.css">
    <meta property="docfx:navrel" content="../toc.html">
    <meta property="docfx:tocrel" content="toc.html">
    
    
    
  </head>
  <body data-spy="scroll" data-target="#affix" data-offset="120">
    <div id="wrapper">
      <header>
        
        <div class="bg-light">
        <nav class="navbar navbar-expand-lg navbar-light bg-light container">
          
          <a class="navbar-brand" href="../index.html">
            <img id="logo" class="svg" src="../images/logo.svg" alt="RogueSharp" width="36" height="36">
          </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        
          <div class="collapse navbar-collapse" id="navbar">
            <!--<form id="search" role="search" class="form-inline my-2 my-lg-0">
              <input id="search-query" class="form-control mr-sm-2" type="search" placeholder="Search" autocomplete="off" aria-label="Search">
            </form>-->
          </div>
        </nav>
        </div>
        
        <div class="bg-dark">
        <nav aria-label="breadcrumb" id="breadcrumb" class="container hide-when-search">
          <!--<ol class="breadcrumb">
            <li class="breadcrumb-item" aria-current="page"></li>
          </ol>-->
        </nav>
        </div>      </header>
      <div role="main" class="container body-content hide-when-search">
      <div class="row">
        
        
        <div class="sidenav hide-when-search col-md-3 pt-md-3 pb-md-3">
          <a class="btn btn-link toc-toggle d-md-none" data-toggle="collapse" data-target="#sidetoggle" href="javascript:;" aria-expanded="true" aria-controls="sidetoggle">
            Show / Hide Table of Contents
          </a>
          <div class="sidetoggle collapse" id="sidetoggle">
            <div id="sidetoc"></div>
          </div>
        </div>
        <div class="article col-md-9">
      <div class="row">
          <div class="col-lg-9">
            <article class="content wrap pt-2 pb-2" id="_content" data-uid="">
<h1 id="multiple-consoles">Multiple Consoles</h1>

<p>In this tutorial we’ll create sub consoles for each part of our game window and <a href="https://en.wikipedia.org/wiki/Bit_blit" title="Bit Blit">Blit</a> them to the root console.</p>
<p><img src="../images/V3Tutorial/03_fourconsoles.png" alt="alt text" title="Four nested consoles"></p>
<h2 id="sub-consoles">Sub Consoles</h2>
<p>Our game is more than a map. It will also have areas for the inventory, player statistics, and a message log. We could just draw all these directly to the root console but it will be better to draw each to their own console and <a href="https://en.wikipedia.org/wiki/Bit_blit" title="Bit Blit">Blit</a> them to the root in their correct positions.</p>
<h2 id="defining-console-dimensions">Defining Console Dimensions</h2>
<p>First we need to define the width and height of each of our sub-consoles and declare each RLConsole. At the top of <code>Game.cs</code> add the following code:</p>
<pre><code class="lang-cs">public static class Game
{
  // The screen height and width are in number of tiles
  private static readonly int _screenWidth = 100;
  private static readonly int _screenHeight = 70;
  private static RLRootConsole _rootConsole;

  // The map console takes up most of the screen and is where the map will be drawn
  private static readonly int _mapWidth = 80;
  private static readonly int _mapHeight = 48;
  private static RLConsole _mapConsole;

  // Below the map console is the message console which displays attack rolls and other information
  private static readonly int _messageWidth = 80;
  private static readonly int _messageHeight = 11;
  private static RLConsole _messageConsole;

  // The stat console is to the right of the map and display player and monster stats
  private static readonly int _statWidth = 20;
  private static readonly int _statHeight = 70;
  private static RLConsole _statConsole;

  // Above the map is the inventory console which shows the players equipment, abilities, and items
  private static readonly int _inventoryWidth = 80;
  private static readonly int _inventoryHeight = 11;
  private static RLConsole _inventoryConsole;

  // ... additional code omitted
}
</code></pre>
<h2 id="instantiate-the-consoles">Instantiate the Consoles</h2>
<p>Now we need to new up our four consoles with the widths and heights that we defined. In our <code>Main()</code> just after the line where we make a new RLRootConsole add the following code:</p>
<pre><code class="lang-cs">public static void Main()
{
  // ... previous code omitted
  // After the line that starts _rootConsole = new RLRootConsole( ...

  // Initialize the sub consoles that we will Blit to the root console
  _mapConsole = new RLConsole( _mapWidth, _mapHeight );
  _messageConsole = new RLConsole( _messageWidth, _messageHeight );
  _statConsole = new RLConsole( _statWidth, _statHeight );
  _inventoryConsole = new RLConsole( _inventoryWidth, _inventoryHeight );

  // ... additional code omitted
}
</code></pre>
<h2 id="set-background-color-and-label">Set Background Color and Label</h2>
<p>Next we’ll want to set the background color of each console and put a label on them so that we can verify that they are in the correct positions when we Blit them to the Root console. In <code>OnRootConsoleUpdate()</code> replace <code>_rootConsole.Print( 10, 10, “It worked!”, RLColor.White );</code> with the following code:</p>
<pre><code class="lang-cs">private static void OnRootConsoleUpdate( object sender, UpdateEventArgs e )
{
  // Set background color and text for each console
  // so that we can verify they are in the correct positions
  _mapConsole.SetBackColor( 0, 0, _mapWidth, _mapHeight, RLColor.Black );
  _mapConsole.Print( 1, 1, &quot;Map&quot;, RLColor.White );

  _messageConsole.SetBackColor( 0, 0, _messageWidth, _messageHeight, RLColor.Gray );
  _messageConsole.Print( 1, 1, &quot;Messages&quot;, RLColor.White );

  _statConsole.SetBackColor( 0, 0, _statWidth, _statHeight, RLColor.Brown );
  _statConsole.Print( 1, 1, &quot;Stats&quot;, RLColor.White );

  _inventoryConsole.SetBackColor( 0, 0, _inventoryWidth, _inventoryHeight, RLColor.Cyan );
  _inventoryConsole.Print( 1, 1, &quot;Inventory&quot;, RLColor.White );
}
</code></pre>
<h2 id="blit-and-render">Blit and Render</h2>
<p>The final step we’ll need to take is to update <code>OnRootConsoleRender()</code> to Blit each of our consoles to the root console in the correct positions. The RLNET method we will use is RLConsole.Blit which takes several parameters.</p>
<p>A source console</p>
<ul>
<li>The X and Y position of the top left corner of a rectangular area from the source</li>
<li>The width and height of the rectangular area from the source that we will be Blitting</li>
<li>A destination console to Blit to</li>
<li>The X and Y position of the top left corner of where we will Blit to in the destination console</li>
</ul>
<pre><code class="lang-cs">private static void OnRootConsoleRender( object sender, UpdateEventArgs e )
{
  // Blit the sub consoles to the root console in the correct locations
  RLConsole.Blit( _mapConsole, 0, 0, _mapWidth, _mapHeight,
    _rootConsole, 0, _inventoryHeight );
  RLConsole.Blit( _statConsole, 0, 0, _statWidth, _statHeight,
    _rootConsole, _mapWidth, 0 );
  RLConsole.Blit( _messageConsole, 0, 0, _messageWidth, _messageHeight,
    _rootConsole, 0, _screenHeight - _messageHeight );
  RLConsole.Blit( _inventoryConsole, 0, 0, _inventoryWidth, _inventoryHeight,
    _rootConsole, 0, 0 );

  // Tell RLNET to draw the console that we set
  _rootConsole.Draw();
}
</code></pre>
<p>And that’s it! If you run the program now you should see output similar to the screenshot at the beginning of this post.</p>
<h2 id="code-on-github">Code on GitHub</h2>
<p>As always the code for the tutorial series so far can be found on GitHub:</p>
<ul>
<li><a href="https://github.com/FaronBracy/RogueSharpV3Tutorial/tree/01SetupConsoles">https://github.com/FaronBracy/RogueSharpV3Tutorial/tree/01SetupConsoles</a></li>
</ul>
<p>Bored waiting for the next tutorial? The complete tutorial project is already finished and the source code is available on Github:</p>
<ul>
<li>Sample Roguelike game using RogueSharp and RLNet console
<ul>
<li><a href="https://github.com/FaronBracy/RogueSharpRLNetSamples">https://github.com/FaronBracy/RogueSharpRLNetSamples</a></li>
</ul>
</li>
<li>Sample Roguelike game using RogueSharp and SadConsole
<ul>
<li><a href="https://github.com/FaronBracy/RogueSharpSadConsoleSamples">https://github.com/FaronBracy/RogueSharpSadConsoleSamples</a></li>
</ul>
</li>
</ul>
<h2 id="closing-thoughts">Closing thoughts</h2>
<p>So far we haven’t used RogueSharp at all. I think it is necessary to do some of these basic setup tasks to pave the way for the future. Don’t worry though we’ll be getting into RogueSharp functionality shortly.</p>
</article>
            <div id="disqus_thread"></div>
            <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
          </div>
          
          <div class="d-none d-lg-block col-md-3" role="complementary">
            <div class="sideaffix pt-3 pb-3">
              <div class="contribution">
                <ul class="nav">
                  <li>
                    <a href="https://github.com/FaronBracy/RogueSharp.Documentation/blob/master/articles/03_multiple_consoles.md/#L1" class="contribution-link text-info" title="Improve this Doc">
                    <i class="fal fa-edit fa-fw"></i>
                    <span>Improve this Doc</span>
                    </a>
                  </li>
                </ul>
              </div>
              <!--<div class="github-links">
                  <a class="github-button" href="https://github.com/fszlin/certes" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star fszlin/certes on GitHub">Star</a>
              </div>-->
              <nav class="hidden-print affix mt-2" id="affix">
              <!-- <p><a class="back-to-top" href="#top">Back to top</a><p> -->
              </nav>
            </div>
          </div>
          </div>
        </div>
      </div>
      </div>
      
      <footer class="bg-secondary">
        <!--<div class="grad-bottom"></div>-->
        <div class="footer bg-secondary">
          <div class="container">
          <div class="d-flex">
            <div class="p-2 flex-grow-1 text-white">
            <a class="text-white" href="https://github.com/FaronBracy/RogueSharp">RogueSharp &copy; 2014-2020 Faron Bracy</a>
            
            </div>
            <div class="p-2">
              <a class="text-white" href="#top">Back to top</a>
            </div>
          </div>
          </div>
        </div>
      </footer>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.0/anchor.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/dos.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/powershell.min.js"></script>
    <script type="text/javascript" src="../styles/docfx.js"></script>
  </body>
</html>
